<template>
	<view>
		<view class="title">
			<view class="top">
				<view class="back" @click="goback">
					{{'<'}}
				</view>
				<view class="title-name">
					菜谱搜索
				</view>
			</view>
			<view class="search">
				<input type="text" v-model="foodName">
				<text @click="search">搜索</text>
			</view>
		</view>
		<!-- 视频 -->
		<view class="news">
			<h1>精品名厨视频-会员专享</h1>
			<image src="../../static/img/mengbanzu254@2x.png" class="icon"></image>
			<scroll-view class="scroll-view_H recommend" scroll-x="true">
				<view class="recommend-item" v-for="(item,index) in video" :key="item._id">
					<view class="top">
						<!-- <image :src="item.coverpic"></image>
						<image src="../../static/img/zu488@2x.png" class="time"></image> -->
						<video controls object-fit='fill' :show-center-play-btn='false' :show-play-btn='false' :show-fullscreen-btn='false' :id="item._id" :src="item.vid" @loadedmetadata="videoTimeUpdateEvent($event)">
						</video>
						<view :id="item._id" class="time" @click="play(item._id)">
							<view class="triangle">
								
							</view>
							<text>{{time[index]}}</text>
						</view>
					</view>
					<h3>{{item.name}}</h3>
					<view class="bottom">
						<view class="left">
							<text>{{item.pageview}}</text>
							<image src="/static/img/liulam @2x.png"></image>
						</view>
						<view class="right">
							<text>{{item.collections}}</text>
							<image src="/static/img/soucang@2x.png" mode=""></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 图片 -->
		<view class="img-message" v-for="item in video" :key="item._id" @click="toMix(item._id)">
			<view class="left">
				<image :src="item.coverpic" mode=""></image>
			</view>
			<view class="right">
				<h1>{{item.name}}</h1>
				<p>鸡蛋,面粉,淀粉</p>
				<view class="message">
					<text>{{item.pageview}}</text>
					<image src="../../static/img/liulam @2x.png" mode=""></image>
					<text>{{item.collections}}</text>
					<image src="../../static/img/soucang@2x.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getVideoDataApi,getSearchDataApi
	} from "../../apis/index.js"
	export default {
		data() {
			return {
				video: [],
				time: [],
				foodName:''
			};
		},
		created() {
			this.lookVideo()
		},
		// computed:{
		// 	newVideo(){
				
		// 	}
		// },
		methods: {
			lookVideo() {
				getVideoDataApi().then((res) => {
					console.log(res);
					this.video = res.message
				})
			},
			videoTimeUpdateEvent(e) { // 播放进度改变
				
				this.time.push(e.detail.duration)
				

				this.time = [...new Set(this.time)]
				
				//  this.playTime=e.detail.currentTime
				//  this.allTime=e.detail.duration
				// console.log('视频播放时长', this.playTime,'视频总时长', this.allTime)
			},
			search(){
				getSearchDataApi({val:this.foodName}).then((res)=>{
					
					this.video=res.menus
				})
			},
			play(val){
				uni.createVideoContext(val).play()
			},
			goback(){
				uni.navigateBack()
			},
			toMix(id){
				uni.navigateTo({
				    //url:"../car/car?id=1",
				    //url:"../car/car?id="+id
				    // url:`/pages/foodsMessage/foodsMessage?_id=${id}`
					url:`/pages/foodStep/foodStep?_id=${id}`
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.title {
		width: 100%;
		height: 286rpx;
		background: url('../../static/img/ditu.png');
		background-size: cover;
		padding: 112rpx 32rpx 0 32rpx;
		box-sizing: border-box;

		.top {
			display: flex;
			margin-bottom: 40rpx;

			.title-name {
				margin: 0 auto;
				color: white;
				font-weight: bold;
				font-size: 42rpx;
			}

			.back {
				font-weight: bold;
				margin-top: -6rpx;
				font-size: 50rpx;
			}
		}

		.search {
			display: flex;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				top: 12rpx;
				left: 70rpx;
				width: 32rpx;
				height: 32rpx;
				background: url("../../static/img/souuo.png");
				background-size: contain;
			}

			input {
				margin-left: 60rpx;
				margin-right: 14rpx;
				width: 540rpx;
				height: 60rpx;
				background-color: #fff;
				border-radius: 12rpx;
			}

			text {
				color: white;
			}
		}
	}

	.news {
		padding-left: 32rpx;
		position: relative;

		.icon {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			left: 374rpx;
			top: 4rpx;
		}
	}

	.recommend {
		// display: grid;
		// grid-template-columns: repeat(2,1fr);
		// gap: 10rpx;
		// padding: 20rpx;
		// box-sizing: border-box;
		white-space: nowrap;
		width: 100%;
		margin-top: 28rpx;

		.recommend-item {
			display: inline-block;
			// width: 100%;
			// height: 300rpx;
			// line-height: 300rpx;
			// text-align: center;

			margin-right: 12rpx;
			color: black;

			.top {
				width: 314rpx;
				height: 220rpx;
				position: relative;

				video {
					width: 100%;
					height: 100%;
				}
				
				.time {
					position: absolute;
					bottom: 12rpx;
					right: 18rpx;
					width: 82rpx;
					height: 24rpx;
					display: flex;
					background-color: gray;
					.triangle {
					  width: 0;
					  height: 0;
					  border-top: 10rpx solid transparent;
					  border-left: 20rpx solid white;
					  border-bottom: 10rpx solid transparent;
					  
					}
					text{
						font-size: 20rpx;
						color: white;
					}
				}
			}

			.bottom {
				display: flex;

				.left {
					text {
						font-size: 28rpx;
						color: gray;
					}

					image {
						width: 34rpx;
						height: 28rpx;
						vertical-align: middle;
					}
				}

				.right {
					text {
						font-size: 28rpx;
						color: gray;
					}

					image {
						width: 34rpx;
						height: 28rpx;
						vertical-align: middle;
					}
				}
			}
		}
	}
.img-message{
	display: flex;
	padding-left: 32rpx;
	margin-bottom: 16rpx;
	.left{
		width: 314rpx;
		height: 210rpx;
		margin-right: 18rpx;
		image{
			width: 100%;
			height: 100%;
			
		}
	}
	.right{
		.message{
			image{
				width: 24rpx;
				height: 14rpx;
			}
		}
	}
}
</style>
